<template>
  <uni-list-item
    v-if="data"
    direction="column"
  >
    <template #header>
      <view class="view_header" @click="click()">
        <view class="view_image">
          <image
            class="image_head"
            text-align:
            center;
            :src="data.avatarUrl"
          />
        </view>
        <view class="view_right">
          <view class="view_title"><text>{{ data.nickName }}</text></view>
          <view class="view_time"><text>{{ datetimeComputed }}</text></view>
        </view>
      </view>
    </template>
    <template #body>
      <view class="view_body" @click="click()">
        <image :src="data.imageList[0]" style="float: right;width: 50px;height: 50px;" />
        <view class="view_body_title">
          <text class="text_title">{{ data.title }}</text>
        </view>
        <view v-if="data.content!= null"><text>{{ contentComputed }}</text></view>
      </view>
    </template>
    <template #footer>
      <view class="view_footer">
        <view class="footer_icon">
          <uni-icons type="redo" size="15" @click="clickShare" />
        </view>
        <view class="footer_icon" @click="click()">
          <uni-icons type="chatbubble" size="15" />
          <text class="text_answerNum">{{ data.commentNum }}</text>
        </view>
        <view class="footer_icon">
          <uni-icons type="eye" size="15" />
          <text class="text_answerNum">{{ data.browseNum }}</text>
        </view>
      </view>
    </template>
  </uni-list-item>
</template>

<script>
import { formatDate } from '@/common/util.js'
export default {
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
				
    }
  },
  computed: {
    datetimeComputed: function() {
      return formatDate(this.data.datetime * 1000)
    },
    contentComputed: function() {
      return this.data.content.length > 20 ? this.data.content.substring(0, 20) + '...' : this.data.content
    } 
  },
  methods: {
    click() {
      // uni.navigateTo({
      //   url: '/pages/questions/questionDetail/index?qid=' + this.data.aid
      // })
    },
    clickShare() {
      uni.showToast({
        title: '暂无此功能',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.view_header{
		height: 40px;
		display: flex;
		.view_image{
			text-align: center;
			.image_head{
				margin: auto;
				height: 30px;
				width: 30px;
				border-radius: 30px;
			}
		}
		.view_right{
			flex: 8;
			margin-left: 10px;
			font-size: 13px;
			.view_time{
				font-size: 12px;
				color: gray;
			}
		}
	}
	.view_body{
		font-size: 12px;
		padding: 5px;
		color: #555;
		.view_body_title{
			min-height: 25px;
			.text_title{
				font-size: 12px;
				font-weight: bold;
			}
		}
		
	}
	.view_footer{
		margin-top: 10px;
		display: flex;
		.footer_icon{
			flex: 1;
			text-align: center;
			margin: auto;
		}
	}
	.text_answerNum{
		font-size: 14px;
		margin: auto;
		text-align: center;
		margin-left: 5px;
		color: gray;
	}
</style>
